<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cloud Test Result Trend Report</title>

<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script src="./lib/highcharts.js"></script>
<style type="text/css">
${
demo


.css


}
</style>
<script type="text/javascript">
$(function () {

   Highcharts.setOptions({
        colors: ['#77a1e5', '#a6c96a', '#8bbc21', '#910000', '#1aadce','#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
    });

    $('#container1').highcharts({

        chart: {
            type: 'area'
        },
		
        title: {
            text: '<b>Pass Rate Trend</b>'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Pass Rate(%)'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:,.0f}%</b><br/>History Index: {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
		
            name: 'Pass Rate',
            data: [#{PASS_RATE_DATASET}#]
        }]
    });
});

$(function () {
 Highcharts.setOptions({
        colors: ['#c42525', '#f28f43', '#8bbc21', '#910000', '#1aadce','#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
    });

    $('#container2').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: '<b>Performance Time Trend</b>'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Performance Time(s)'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:,.0f}s</b><br/>History Index: {point.x}'
        },
        plotOptions: {
            area: {
			   
                pointStart: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Run Time',
            data: [#{RUN_TIME_DATASET}#]
        }, {
            name: 'Duration Time',
            data: [#{DURATION_TIME_DATASET}#]
        }]
    });
});
$(function () {
 Highcharts.setOptions({
        colors: ['#a6c96a', '#a6c96a', '#8bbc21', '#910000', '#1aadce','#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
    });

    $('#container3').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: '<b>Case Count Trend</b>'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Case Count'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:,.0f}</b><br/>History Index: {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Case Count',
            data: [#{CASE_COUNT_DATASET}#]
        }]
    });
});
		</script>
</head>
<body>

	<span align='center'
		style='font-size: 14pt; font-weight: bold; font-family: Tahoma;'><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		Cloud Test Result Trend Report on #{REPORT_TIMESTAMP}#<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font
		size='1'>----powered by Cloud Automation Test
			Manager&Reportor&reg; and HighCharts engine</font> </span>
	<br>
	<br>
	<br>

	<div id="container1"
		style="min-width: 310px; height: 500px; margin: 0 auto"></div>
	<div id="container2"
		style="min-width: 310px; height: 500px; margin: 0 auto"></div>
	<div id="container3"
		style="min-width: 310px; height: 500px; margin: 0 auto"></div>

	<div
		style="font: 10px arial, sans-serif; text-align: right; width: 100%; height: 60px; line-height: 60px;">#{COPYRIGHT_INFO}#</div>
</body>
</html>
